<template>
  <div class="flex flex-col h-full">
    <a-row class="mt-2">
      <a-col :span="4">
        <a-card class="flex-1 card-height">
          <a-form :colon="false">
            <a-form-item label="">
              <a-input v-model:value="formState.zjm" placeholder="请输入字典名称" @keydown.enter="getDictInfoTypeList" />
              <!-- <a-select v-model:value="type" placeholder="请选择" :options="departmentList" @change="onSelectQuery" /> -->
            </a-form-item>
          </a-form>
          <template v-if="authorityData.length">
            <div class="tree-height">
              <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" block-node :tree-data="authorityData" @select="handlerTreeSelect">
                <template #title="{ dictCommonName, key }">
                  <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ dictCommonName }}</span>
                  <template v-else>{{ dictCommonName }}</template>
                </template>
              </a-tree>
            </div>
          </template>
          <template v-else>
            <a-empty />
          </template>
        </a-card>
      </a-col>
      <a-col :span="20">
        <a-card class="flex-1 ml-3">
          <BaseTable
            :loading="loading"
            column-code="00001096"
            fill
            :data-source="tableData"
            bordered
            :pagination="{ total: page.total, current: page.current, pageSize: page.pageSize }"
            @change="onPageChange"
          >
            <template #bodyCell="{ column, index, record }">
              <template v-if="column.dataIndex === 'sxh'">
                {{ index + 1 }}
              </template>
              <template v-if="column.dataIndex === 'status'">
                <a-switch v-model:checked="record.status" @change="onSwitch(record)" />
              </template>
            </template>
          </BaseTable>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import BaseTable from '@/components/BaseTable'

const loading = ref(false)
// const type = ref(undefined)
const typeCode = ref('')
const formState = ref({})
const page = ref({ total: 0, current: 1, pageSize: +getSystemConfig('DFFAULT_PAGE_SHOW_COUNT') || 10 })
const expandedKeys = ref([])
const selectedKeys = ref([])
const tableData = ref([])
const departmentList = ref([])
const authorityData = ref([])

const getDictInfoTypeList = async () => {
  const { code, data, msg } = await post('/operation/opex/getDictCommonList', { dictCommonType: formState.value.zjm })
  if (code !== 0) return message.error(msg)
  if (!formState.value.zjm) {
    departmentList.value = data.map((item) => {
      return {
        label: item.dictCommonType,
        value: item.dictCommonType
      }
    })
    // departmentList.value.unshift({ label: '选择全部', value: '' })
    // type.value = departmentList.value[0].value
  }
  // authorityData.value = data
  authorityData.value = getTreeData(data)
  expandedKeys.value.push(data[0]?.key)
  selectedKeys.value.push(data[0]?.children[0]?.key)
  handlerTreeSelect(selectedKeys.value)
}
const getTreeData = (data = []) => {
  data.forEach((item) => {
    item.dictCommonName = item.dictCommonType
  })
  return data
}
// const onSelectQuery = (val) => {
//   getDictInfoTypeList(val)
// }

const handlerTreeSelect = (selectKey) => {
  if (selectKey.length === 0 || !selectKey[0].toString().includes('-')) {
    return
  }
  authorityData.value.forEach((item) => {
    if (selectKey[0] === item.key) {
      typeCode.value = item.dictCommonCode
    }
    item.children.forEach((i) => {
      if (selectKey[0] === i.key) {
        typeCode.value = i.dictCommonCode
      }
    })
  })
  queryList()
}
const onPageChange = ({ current, pageSize }) => {
  page.value.current = current
  page.value.pageSize = pageSize
  queryList()
}

const queryList = async () => {
  loading.value = true
  const { code, data, total } = await post('/operation/opex/getDictCommonItemList', {
    dictCommonCode: typeCode.value,
    pageNum: page.value.current,
    pageSize: page.value.pageSize
  })
  if (code !== 0) return
  tableData.value = data
  loading.value = false
  page.value.total = total
  tableData.value.forEach((item) => {
    item.status = item.status ? true : false
  })
}

// 状态
const onSwitch = async (row) => {
  const { code, msg } = await post('/operation/opex/changrDictCommonItemStatus', { id: row.id, status: row.status ? 1 : 0 })
  if (code !== 0) return message.error(msg)
  message.success(msg)
  queryList()
}

onMounted(() => {
  getDictInfoTypeList()
})
</script>
<style lang="less" scoped>
.card-height {
  height: calc(100vh - 67px);
  .tree-height {
    height: calc(100vh - 180px);
    overflow-y: scroll;
  }
}
</style>
